<!-- 用户信息 -->
<template>
	<Card :margin="{top:0}">
		<!-- 已登录 -->
		<template v-if="isLogin">

			<view class="u-flex u-padding-top-50 u-padding-bottom-46">
				<view class="u-flex-2">
					<view class="u-flex">
						<u-avatar mode="square" :src="userInfo.avatar"></u-avatar>
						<view class="u-margin-left-20">
							<view class="text-name">{{userInfo.name}}</view>
							<view class="text-department">{{userInfo.currentDept.department}}</view>
						</view>
					</view>
					<view class="u-margin-top-30">
						<u-tag :text="userInfo.currentDept.role" @click="onRole" shape="circle" border-color="#F5F7FA"
							color="#98A5B3" bg-color="#F5F7FA" />
					</view>
				</view>
				<view class="u-flex-1 u-text-right">
					<image src="../../../static/other/pie.png" @click="onShowPie" class="img-pie" mode=""></image>
				</view>
			</view>

			<u-popup :mask="true" mode="center" width="95%" duration="100" v-model="pieVisible"
				@close="pieVisible=false" border-radius="20" :closeable="true">
				<view class="u-padding-left-30 u-padding-top-30  text-pie">
					本月工单处理
				</view>
				<pie-chart :width="540" :height="350" ref="pieChart"  canvasId="index_pie_1" />
			</u-popup>

			<RoleSelectPopUp ref="RoleSelectPopUp" :value="userInfo.currentDept.deptId" @value="onRoleSelectPopUpValue">
			</RoleSelectPopUp>
		</template>
		<!-- 未登录 -->
		<template v-else>
			<view style="height:266rpx;" class="u-flex">

				<HButton :block="false" size="small" @click="onLoginIn">去登录</HButton>
			</view>
		</template>

	</Card>
</template>

<script>
	import Card from '../components/wrapper.vue'
	import PieChart from '@/components/stan-ucharts/PieChart.vue';
	import HButton from '@/components/button/index.vue'
	import RoleSelectPopUp from '@/components/select/roleSelectPopUp.vue'
	import {
		relogin
	} from '@/apis/login.js'
import { echartWorkOrderCount } from '../../../apis';
	export default {
		components: {
			Card,
			PieChart,
			HButton,
			RoleSelectPopUp
		},

		props: {
			isLogin: Boolean
		},
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				pieVisible: false,
				roleVisible: false,
				pieData: {
					//饼状图数据
					series: [{
							name: '待审核',
							data: 50,
							color: '#fa7d7d'
						},
						{
							name: '已完成',
							data: 30,
							color: '#f7b77c'
						},
						{
							name: '处理中',
							data: 20,
							color: '#6fde7f'
						},
						{
							name: '暂停处理',
							data: 18,
							color: '#67dde0'
						},
						{
							name: '待处理',
							data: 8,
							color: '#77aeed'
						}
					]
				},
				userInfo: {
					avatar: '',
					name: '',
					nickName: '',
					currentDept: {
						department: '',
						role: '',
						deptId: ''
					},
					deptIds: []
				}
			}
		},

		watch: {
			isLogin: {
				handler: function(val) {
					if (val) {
						this.init()
					}
				}
			}
		},
		mounted() {
			const self = this
			self.init()
			uni.$on('update_storage', (data) => {
				console.log(data)
				self.init()
			})
		},
		methods: {
			async onRoleSelectPopUpValue(val) {
				let res = await relogin(val.id)
				//0否1是
				uni.setStorageSync('isFactory', res.body?.isFactory || 0)
				uni.setStorageSync('token', res.body.token)
				uni.setStorageSync('currentDept', val.other)
				this.$emit('relogin')
			},
			onRole() {
				this.$refs.RoleSelectPopUp.openPopUp()
			},
			init() {
				let {
					avatarUrl,
					nickName
				} = uni.getStorageSync('userinfo')
				let userName = uni.getStorageSync('username')
				let deptIds = uni.getStorageSync('depts')
				let currentDept = uni.getStorageSync('currentDept')
				this.userInfo.avatar = avatarUrl
				this.userInfo.name = userName

				this.userInfo.currentDept.department = `${currentDept.hospitalName}/${currentDept.deptName}`
				this.userInfo.currentDept.role = currentDept.roleName
				this.userInfo.currentDept.deptId = currentDept.deptId

				this.userInfo.deptIds = deptIds


			},
			 async onShowPie() { 
				this.pieVisible = true 
				this.$refs['pieChart'].renderCharts();
			},
			onLoginIn() {

				wx.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.img {
		&-pie {
			width: 144rpx;
			height: 144rpx;
		}
	}

	.text {
		&-name {

			font-weight: 600;
			font-size: 40rpx;
			color: #0F2E4D;
		}

		&-department {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-pie {
			font-weight: 600;
			font-size: 32rpx;
			color: #0F2E4D;
		}
	}
</style>
